import { useQuasar } from '@teld/q-components';
import { defineComponent } from 'vue';
import icons from './icons';
import styles from './index.module.scss';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});
    const $q = useQuasar();

    function show(params) {
      $q.dialog({
        // title: 'Confirm',
        message: `<t-icon name="${params}" />`,
        cancel: false,
        persistent: false,
      })
        ?.then?.(() => {
          console.log('Confirmed');
        })
        ?.catch?.(() => {
          console.log('Cancelled');
        });
    }

    return () => {
      return (
        <div class={[styles.module]}>
          {icons.map(v => {
            return (
              <span
                class={[styles.item]}
                onClick={() => {
                  show(v);
                }}
              >
                <t-icon key={v} class={[styles.icon]} name={v} />
                <span class={[styles.label]}>{v}</span>
              </span>
            );
          })}
        </div>
      );
    };
  },
});
